<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body class="container-fluid"><br>
		<div id="app">
			<p>
				<my-component></my-component>
			</p>
			<p>
				<sim-count></sim-count>
				<sim-count></sim-count>
				<sim-count></sim-count><br>
			</p>
		</div>
	
		<!--将模版取出来-->
		<template id="tem">
			<div>this is a component!</div>
		</template>
		
		<script src="js/vue.js" ></script>
		<script>
			Vue.component('sim-count',{
				template: '<button v-on:click="count += 1">{{count}}</button>',
				data: function(){
					return {
						count: 0
					}
				}
			});
			
			var child = {
				template: '#tem'
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '',
					obj: {
						name: 'DOTA',
						version: 'v6.78'
					}
				},
				components: {
					'my-component': child
				}
			});
			
			
			
			
		</script>
	</body>
</html>
